<template>
	<view>
		<view class="cardContent" v-for="(cartItem,cartindex) in goodslist" :key="cartindex">
			<view class="left">
				<u-checkbox @change="checkboxChange" shape="circle" v-model="cartItem.is_checked?true:false"
					:key="cartindex" :name="cartItem.id"></u-checkbox>
			</view>

			<u-image width="200rpx" height="200rpx" :src="cartItem.goods.cover_url" @click="jump(`pages/goods/show`,cartItem.goods_id)"></u-image>

			<view class="right">
				<view class="title">{{cartItem.goods.title}}</view>
				<view class="biaoqian">{{cartItem.goods.description}}</view>
				<view class="right_bottom">
					<view class="price">￥{{cartItem.goods.price}}</view>

					<u-number-box v-model="cartItem.num" @change="numChange" :index="cartItem.id" :min="1">
					</u-number-box>

					<view class="delete">
						<u-icon name="trash" color="red" @click="deleteCart" :index="cartItem.id"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottomFixed">
			<u-checkbox v-model="allCheck" @click="checkedAll" shape="circle">全选</u-checkbox>
			<view class="heji">合计:</view>
			<view class="sumprice">￥{{totalprice}}</view>
			<view class="jiesuan">
				<u-button size="medium" type="primary">去结算</u-button>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				goodslist: [],
			}
		},
		onLoad() {
			this.getCartData();
		},
		computed: {
			// 全选与全不选判断
			allCheck: {
				get() {
					return this.goodslist.every((goods => {
						return goods.is_checked
					}))
				},
				set(val) {
					console.log(val);
					this.checkApi(val);
				}
			},
			totalprice() {
				return this.goodslist.filter((goods) => {
					if (goods.is_checked) {
						return true;
					}
				}).reduce((pre, goods) => {
					return parseInt(pre) + parseInt(goods.goods.price) * goods.num;
				}, 0);
			},
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发，
			async checkboxChange(e) {
				const {
					value,
					name
				} = e; //name是id,value是布尔值。解构赋值
				console.log(e);
				let idArr = []; //初始化提交的数组
				this.goodslist.forEach((goods) => {
					if (goods.is_checked) {
						idArr.push(goods.id);
					}
				});
				if (!value) {
					//选中状态点击后变成false
					idArr.splice(idArr.indexOf(name), 1);
					const res = await this.$u.api.cartIsChecked(idArr);
					console.log(idArr);
				} else {
					//未选中状态点击后变成true
					idArr.push(name);
					const res = await this.$u.api.cartIsChecked(idArr);
					console.log(idArr);
				}

				this.getCartData();
			},
			// 全选
			// checkedAll(){
			// 	this.goodslist.map(val => {
			// 		console.log(val);
			// 		// val.checked = true;
			// 	})
			// },
			//全选与全不选接口调用
			async checkApi(val) {
				let idArr = [];
				console.log(val);
				if (!val) {
					const res = await this.$u.api.cartIsChecked(idArr);
				} else {
					this.goodslist.forEach((goods => {
						idArr.push(goods.id)
					}))
					const res = await this.$u.api.cartIsChecked(idArr);
				}
				this.getCartData();
			},
			//步进器事件
			async numChange(e) {
				console.log('当前值为: ' + e.value);
				const num = e.value;
				const cart = e.index;
				console.log(e);
				const res = await this.$u.api.cartNum(cart, num);

			},
			//获取购物车列表
			async getCartData() {
				const res = await this.$u.api.cartList();
				this.goodslist = res.data;
				console.log(this.goodslist);
			},
			//删除商品
			async deleteCart(e){//e为商品id
				// console.log(e);
				await this.$u.api.cartDelete(e);
				this.getCartData();
			},
			jump(url,id){
				this.$u.route({
					url,
					params:{
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardContent {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.left {
			margin-right: 20rpx;
			// width: 80rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			height: 180rpx;
			justify-content: space-around;
			margin-left: 30rpx;
			width: 340rpx;

			.title {
				font-weight: bold;
			}

			.right_bottom {
				display: flex;
				flex-direction: row;
				align-items: center;

				.price {
					color: red;
					margin-right: 10rpx;
				}

				.delete {
					margin-left: 10rpx;
				}
			}
		}
	}

	.bottomFixed {
		height: 90rpx;
		position: fixed;
		left: 20rpx;
		right: 0;
		bottom: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.heji {
			margin-left: 200rpx;
		}

		.sumprice {
			color: red;
		}

		.jiesuan {
			margin-right: 20rpx;
		}
	}
</style>
